<template>
  <div class="popup-header">
    <div class="top-manu">
        <div class="loge">
            <div class="icon-logo"></div>
        </div>
        <div class="setting" @click="changeCompant">
            <div class="name">
                设置
            </div>
            <div class="icon">
                <div class="normal"><img src="@/assets/icons/setting.svg" alt=""></div>
            </div>
        </div>
    </div>
  </div>
</template>

<script>
export default {
    name:'PopupHeader',
    methods:{
        changeCompant(){
            console.log("Setting")
            this.$EventBus.$emit('changeCompant', 'Setting')
        }
    }
}
</script>

<style scoped lang="scss">
    .top-manu{
        display: flex;
        height: 40px;
        user-select: none;
        position: relative;
        line-height: 42px;
        text-align: center;
        font-size: 14px;
        border-bottom: 1px solid #e4e4e4;
        padding: 0 5px;
        cursor: pointer;

        .loge{
            width: 50%;
            .icon-logo {
                margin-top: 6px;
                width: 100px;
                height: 25px;
                background-image: url(@/assets/icons/logodark.png);
            }
        }

        .setting{
            position: relative;
            display: flex;
            width: 50%;
            height: 100%;

            .name{
                width: 70%;
                margin-top: -2px;
                margin-left: 20px;
                text-align: right;
                color: #A1A6C4;
                height: 100%;
            }
            .icon {
                vertical-align: middle;
                display: inline-block;
                margin-top: 10px;
                width: 30%;
                img {
                    vertical-align: middle;
                    float: right;
                    max-width: 20px;
                    max-height: 20px;
                    display: block;
                }
            }
        }
    }
</style>